<template>
    <Page>
        <Topbar hideMenu />
        <Content>
            <Panel header headerBorder title="Table示例" style="padding: 4rem;">
                <view slot="toolbar">
                    <view class="back" @click="back">
                        <u-icon name="arrow-left" color="#666" size="14" style="margin-right: 0.5rem;"></u-icon> 返回
                    </view>
                </view>
                <view class="table-demo">
                    <Table ref="table" pagination :columns="columns" :src="src" :params="params" @rowClick="rowClick"/>
                </view>
            </Panel>
        </Content>
    </Page>
</template>

<script>
    import Page from "@/components/page/index.vue";
    import Topbar from "@/components/topbar/index.vue";
    import Content from "@/components/content/index.vue";
    import Panel from "@/components/panel/index.vue";
    import Table from '@/components/table/index.vue';
    import {
        getDevice
    } from "@/store/user.js";

    export default {
        components: {
            Page,
            Topbar,
            Content,
            Panel,
            Table
        },
        data() {
            return {
                src: '/dms/mobile/selectWorkByDeviceId',
                params: {
                    deviceId: getDevice().id
                },
                columns: [{
                    label: '工单状态',
                    value: 'state',
                }, {
                    label: '工序',
                    value: 'productionProcesses',
                }, {
                    label: '工单号',
                    value: 'workCode',
                }, {
                    label: '计划开始时间',
                    value: 'workStartTime',
                    width:'25rem',
                }, {
                    label: '模具编号',
                    value: 'moldCode',
                }, {
                    label: '模具名称',
                    value: 'moldName',
                }, {
                    label: '产品编号',
                    value: 'materialCode',
                }, {
                    label: '产品名称',
                    value: 'materialName',
					width:'43rem',
                }, {
                    label: '产品型号',
                    value: 'materialModel',
                    width:'30rem',
                }, {
                    label: '计划数量',
                    value: 'planProduceQuantity',
                    type: 'number'
                }, {
                    label: '报废数量',
                    value: 'scrapQuantity',
                    type: 'number'
                }],
            }
        },
        onLoad() {

        },
        mounted() {
            this.$refs['table'].reload();
        },
        methods: {
            back() {
                uni.navigateBack(-1)
            },
            rowClick(item, index) {
                console.log(item, index);
            }
        }
    }
</script>

<style scoped lang="scss">
    .back {
        display: flex;
        justify-content: center;
        align-items: center;
        color: #666;
    }

    .table-demo {
        flex: 1;
        display: flex;
        flex-direction: column;
        width: 100%;
    }
</style>